body {
background: #151515;
height: 100vh;
display: grid;
place-items: center;
}
.input-wrapper label {
position: relative;
display: block;
margin: 40px 0;
color: #fff;
font-size: 1.5em;
cursor: pointer;
}
.input-wrapper input[type="checkbox"] {
-webkit-appearance: none;
}
.input-wrapper i {
position: absolute;
display: inline-block;
width: 25px;
height: 25px;
border: 2px solid #fff;
}
.input-wrapper input[type="checkbox"]:checked~i {
height: 15px;
width: 25px;
border-top: none;
border-right: none;
transform: rotate(-45deg);
}
.input-wrapper span {
position: relative;
left: 40px;
transition: 0.5s;
}
.input-wrapper span:before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background: #fff;
transform: translateY(-50%) scaleX(0);
transform-origin: left;
transition: transform 0.5s;
}
.input-wrapper input[type="checkbox"]:checked~span:before {
transform: translateY(-50%) scaleX(1);
transform-origin: right;
transition: transform 0.5s;
}
.input-wrapper input[type="checkbox"]:checked~span {
color: #fff;
}